<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content=" ">
  <meta name="author" content=" ">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Foodtruck - Tacos : Shortcodes Buttons Typography</title>

  <link rel="stylesheet" type="text/css" href="./assets/js/customscroll/jquery.mCustomScrollbar.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/flexslider/css/flexslider.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/prettyPhoto/css/prettyPhoto.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/bxslider/jquery.bxslider.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/font-awesome.css">

  <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="./assets/flavours/tacos/css/tacos.css">

  <!-- modernizr : detect css transition -->
  <script src="./assets/js/modernizr.custom.81779.js"></script>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="./assets/bootstrap/js/html5shiv.js"></script>
  <script src="./assets/bootstrap/js/respond.min.js"></script>
  <![endif]-->


</head>
<body>



<nav class="navbar navbar-default" role="navigation">
  <div class="inner">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle btn btn-primary" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <div class="text-center">
          <p class="address">
            Tacos Locos - Atlantic Avenue 1234, New York, +66 87 65 43 21
          </p>
        </div>

        <a class="small-brand" href="/"  data-width="221" data-top="58"><img src="./assets/flavours/tacos/images/content/logo-small.png" alt=" " ></a>

        <a href="tel:66-87-65-43-21" class="phoneIcon" style="display:none">+66 87 65 43 21</a>
        <a href="http://goo.gl/maps/IUzKJ" class="locationIcon" target="_blank" style="display:none;">http://goo.gl/maps/IUzKJ</a>
        <ul class="smallSocials">
          <li class="fb"><a href="#"><img src="./assets/images/smallsocial-fb.png" alt="Facebook"></a></li>
          <li class="tw"><a href="#"><img src="./assets/images/smallsocial-tw.png" alt="Twitter"></a></li>
          <li class="gg"><a href="#"><img src="./assets/images/smallsocial-gg.png" alt="Google+"></a></li>
          <li class="rss"><a href="#"><img src="./assets/images/smallsocial-rss.png" alt="RSS"></a></li>
        </ul>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav text-center" data-type="margin-top" data-pos="138">
          <li><a href="index.html">Home</a></li>
          <li><a href="8_menucard.html">Menu card</a></li>
          <li><a href="9_events.html">Events</a></li>
          <li><a href="10_story.html">Story</a></li>
          <li><a href="11_gallery.html">Gallery</a></li>
          <li class="dropdown active">
            <a href="1_shortcodes_boxes.html" class="dropdown-toggle">Shortcodes</a>
            <ul class="dropdown-menu">
              <li><a href="1_shortcodes_boxes.html">Boxes</a></li>
              <li><a href="2_shortcodes_toggleable.html">Toggleable</a></li>
              <li><a href="3_shortcodes_contact.html">Contact</a></li>
              <li><a href="4_buttons_typography.html">Typography</a></li>
              <li><a href="5_shortcodes_elements.html">Elements</a></li>
              <li><a href="6_images_sliders.html">Sliders</a></li>
            </ul>
          </li>

          <li><a href="7_blog.html">Blog</a></li>
          <li><a href="12_contact.html">Contact</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- / container -->

    <div class="btm"></div>
  </div>

</nav>


<div class="bg-1 section">
  <div class="inner" data-topspace="80" data-bottomspace="100">
    <div class="container">

      <h3 class="hdr4">Buttons</h3>

      <div class="demoContent">

        <a href="#" class="btn btn-default btn-lg">Large Size</a>
        <a href="#" class="btn btn-default">Default Size</a>
        <a href="#" class="btn btn-default btn-sm">Small Size</a>
        <a href="#" class="btn btn-default btn-xs">Extra Small Size</a>

        <br><br><br>

        <div class="row">
          <div class="col-md-6">
            <a href="#" class="btn btn-default btn-block">Btn Block</a>
          </div>
        </div>
        <!-- / row -->

        <br><br>
        <a href="#" class="btn btn-primary disabled">inactive</a>
        <a href="#" class="btn btn-primary">Primary button</a>
        <br><br>
        <a href="#" class="btn btn-primary"><i class="fa fa-search"></i><span>Search</span></a>
        <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-cutlery"></i><span>Healthy Food</span></a>
        <a href="#" class="btn btn-primary btn-xs"><i class="fa fa-truck"></i><span>Lets roll!</span></a>
        <br><br>
        <a href="#" class="btn btn-default"><span>RSS Feed</span><i class="fa fa-rss"></i></a>
        <a href="#" class="btn btn-default btn-sm"><span>Click here</span><i class="fa fa-anchor"></i></a>
        <a href="#" class="btn btn-default btn-xs"><span>Go to Dribbble</span><i class="fa fa-dribbble"></i></a>


      </div>

      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Header</h3>

      <h1>Header H1</h1>

      <h2>Header H2</h2>

      <h3>Header H3</h3>
      <h4>Header H4</h4>
      <h5>Header H5</h5>
      <h6>Header H6</h6>

      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Blockquote</h3>

      <div class="row">
        <div class="col-md-7">
          <blockquote class="box_text">
            <span class="ribbon_icon"><i class="fa fa-quote-left"></i></span>

            <div class="inner">
              <p>
                Hasellus semper auctor hendrerit. In malesuada vehicula sem id ultrices. Nunc ut lorem malesuada vulputate.
              </p>
              <span class="author">- Floyd Rose CEO, Fresh Food-</span>
            </div>
          </blockquote>
        </div>
        <div class="col-md-5"></div>
      </div>
      <!-- / row -->
      <br><br><br>

      <div class="row">
        <div class="col-md-7">
          <blockquote class="type2">
            <p>
              Pellentesque purus lectus, iaculis id ultricies laoreet, auctor quis lacus. Vivamus feugiat cursus suscipit. Phasellus semper auctor hendrerit. In malesuada vehicula sem id ultrices. Nunc ut lorem malesuada
              vulputate. Nulla vel nisl velit, et rutrum magna. Aliquam eu mauris nisi, sit amet rutrum nulla.
            </p>
            <span class="author">- Floyd Rose CEO, Fresh Food-</span>
          </blockquote>
        </div>
        <div class="col-md-5"></div>
      </div>
      <!-- / row -->

      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Dropcap</h3>

      <div class="row">
        <div class="col-md-6">
          <h4>It all started with a ...</h4>

          <p class="dropcap">
            Pellentesque purus lectus, iaculis id ultricies laoreet, auctor quis lacus. Vivamus feugiat cursus suscipit. Phasellus semper auctor hendrerit. In malesuada vehicula sem id ultrices. Nunc ut lorem malesuada
            vulputate. Nulla vel nisl velit, et rutrum magna. Aliquam eu mauris nisi, sit amet rutrum nulla.
          </p>

        </div>
        <div class="col-md-6"></div>
      </div>
      <!-- / row -->

      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Text Highlight</h3>

      <div class="row">
        <div class="col-md-6">
          <p>
            Pellentesque <span class="highlight type1" data-toggle="tooltip" data-placement="top" title="This is tooltip description">purus lectus, iaculis</span> id ultricies laoreet, auctor quis lacus. Vivamus feugiat
            cursus suscipit. Phasellus semper auctor hendrerit. <span class="highlight type2" data-toggle="tooltip" data-placement="top" title="This is tooltip description">In malesuada</span> vehicula sem id ultrices.
            Nunc ut lorem malesuada vulputate. Nulla vel nisl <span class="highlight type3" data-toggle="tooltip" data-placement="top" title="This is tooltip description">velit, et rutrum magna</span>. Aliquam eu mauris
            nisi, sit amet rutrum nulla.
          </p>
        </div>
        <div class="col-md-6"></div>
      </div>
      <!-- / row -->

      <br>
      <hr class="line-separator">
      <br>


      <h3 class="hdr4">List</h3>

      <div class="row">
        <div class="col-md-4">
          <ul class="list-icons list-unstyled">
            <li><i class="fa fa-circle"></i>Pellentesque purus lectus, iaculis id</li>
            <li><i class="fa fa-circle"></i>Ultricies laoreet, auctor quis lacus.</li>
            <li><i class="fa fa-circle"></i>Vivamus feugiat cursus suscipit.</li>
          </ul>
        </div>
        <div class="col-md-4">
          <ul class="list-icons list-unstyled">
            <li><i class="fa fa-star"></i>Pellentesque purus lectus, iaculis id</li>
            <li><i class="fa fa-star"></i>Ultricies laoreet, auctor quis lacus.</li>
            <li><i class="fa fa-star"></i>Vivamus feugiat cursus suscipit.</li>
          </ul>
        </div>
        <div class="col-md-4">
          <ul class="list-icons list-unstyled">
            <li><i class="fa fa-chevron-right"></i>Pellentesque purus lectus, iaculis id</li>
            <li><i class="fa fa-chevron-right"></i>Ultricies laoreet, auctor quis lacus.</li>
            <li><i class="fa fa-chevron-right"></i>Vivamus feugiat cursus suscipit.</li>
          </ul>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-md-4">
          <ul class="list-icons list-unstyled">
            <li><i class="fa fa-hand-o-right"></i>Pellentesque purus lectus, iaculis id</li>
            <li><i class="fa fa-hand-o-right"></i>Ultricies laoreet, auctor quis lacus.</li>
            <li><i class="fa fa-hand-o-right"></i>Vivamus feugiat cursus suscipit.</li>
          </ul>
        </div>
        <div class="col-md-4">
          <ul class="list-icons list-unstyled">
            <li><i class="fa fa-caret-right"></i>Pellentesque purus lectus, iaculis id</li>
            <li><i class="fa fa-caret-right"></i>Ultricies laoreet, auctor quis lacus.</li>
            <li><i class="fa fa-caret-right"></i>Vivamus feugiat cursus suscipit.</li>
          </ul>
        </div>
        <div class="col-md-4">
          <ul class="list-icons list-unstyled">
            <li><i class="fa fa-check"></i>Pellentesque purus lectus, iaculis id</li>
            <li><i class="fa fa-check"></i>Ultricies laoreet, auctor quis lacus.</li>
            <li><i class="fa fa-check"></i>Vivamus feugiat cursus suscipit.</li>
          </ul>
        </div>
      </div>

      <br>
      <hr class="line-separator">
      <br>


      <h3 class="hdr4">Table</h3>

      <p>
        Bring everything in order with these nice tables
      </p>

      <div class="pretty-table table-responsive">
        <table class="table">
            <thead>
            <tr>
              <th>Header1</th>
              <th>Header2</th>
              <th>Header3</th>
              <th>Header4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Topic 1</td>
              <td>John</td>
              <td>Feb.19th 1977</td>
              <td>555-444-333-1</td>
            </tr>
            <tr>
              <td>Topic 2</td>
              <td>Frank</td>
              <td>Feb.19th 1977</td>
              <td>555-444-333-2</td>
            </tr>
            <tr>
              <td>Topic 3</td>
              <td>Alicia</td>
              <td>Feb.19th 1977</td>
              <td>555-444-333-3</td>
            </tr>
            <tr>
              <td>Topic 4</td>
              <td>Jane</td>
              <td>Feb.19th 1977</td>
              <td>555-444-333-4</td>
            </tr>
            <tr>
              <td>Topic 5</td>
              <td>George</td>
              <td>Feb.19th 1977</td>
              <td>555-444-333-5</td>
            </tr>
            </tbody>
        </table>
      </div>
    <!-- / pretty-table -->

    </div>


  </div>
</div>
<!-- / bg-1 -->


<footer>
  <div class="container">

    <div class="row">
      <div class="col-md-3">

        <h4>Contact</h4>

        <p>
          Atlantic Avenue 1234,<br><br>
          New York, NY<br><br>
          123 - 456 - 7891<br><br>
          <a href="mailto:hello@tacoslocos.com">hello@tacoslocos.com</a>
        </p>
        <hr>
        <h4>Hours</h4>

        <p>
          Monday - Friday<br>
          11:00 am - 11:00 pm
          <br><br>
          Saturday & Sunday<br>
          10:45 am - 5:00 pm
          <br><br>
          Saturday & Sunday<br>
          10:45 am - 5:00 pm
        </p>

      </div>
      <div class="col-md-6">
        <img src="./assets/flavours/tacos/images/content/logo.png" alt=" ">

        <div class="googleMap" data-location="Marine Ave. New York, NY" data-text="We are here!"></div>

        <ul class="bigSocials">
          <li class="fb"><a href="#"><img src="./assets/images/social-fb.png" alt="Facebook"></a></li>
          <li class="tw"><a href="#"><img src="./assets/images/social-tw.png" alt="Twitter"></a></li>
          <li class="gg"><a href="#"><img src="./assets/images/social-gg.png" alt="Google+"></a></li>
          <li class="rss"><a href="#"><img src="./assets/images/social-rss.png" alt="RSS"></a></li>
        </ul>

        <p class="copyright">© Copyright 2014 <a href="#">TemplateRockers</a></p>


      </div>
      <div class="col-md-3">
        <h4>Latest Tweets</h4>

        <div class="tweets">
          <div style="display:none">here will be displayed live tweets, configuration is placed in /twitter/config.php</div>
        </div>
      </div>
    </div>

  </div>
  <a href="#" id="toTop"></a>
</footer>
<!-- / footer -->


<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>

<!-- we're including library : maps.googleapis.com/maps/api/js?sensor=false in main.js -->
<script src="./assets/js/gmap3.min.js"></script>

<script src="./assets/js/customscroll/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="./assets/js/flexslider/jquery.easing.1.3.min.js"></script>
<script src="./assets/js/flexslider/jquery.flexslider-min.js"></script>
<script src="./assets/js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script src="./assets/js/bxslider/jquery.bxslider.min.js"></script>
<script src="./assets/twitter/js/jquery.tweet.js"></script>
<script src="./assets/js/jquery.hoverdir.js"></script><script src="./assets/js/jquery.arctext.js"></script>
<script src="./assets/js/jquery.placeholder.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>

<script src="./assets/form/js/form.js"></script>
<script src="./assets/js/main.js"></script>

<script src="./assets/js/less.min.js"></script>



</body>

</html>